<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title>CodePress Sample</title>
	<script type="text/javascript" src="codepress.js"></script>
	<style>
		body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;}
		p {margin:0 0 15px 0;}
		a,a:visited {color:#7f0055;}
		select {background:#ffffe1;}
		button {margin-top:5px;}
		button.actions {width:171px;font-family:arial;}
		h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;}
		h1 a {text-decoration:none;}
		h2 {margin:0;}
		h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;}
		h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;}
		h4 {font-size:18px;font-weight:normal;z-index:0;}	
		code {color:#0080c0;font-size:13px;font-weight:bold;}
		ol, ul {padding:5px 0 5px 25px;margin:0;}
		ol li, ul li {margin:8px 0 8px 0;}
		
		#logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver; margin-bottom: 1em;}
		#container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;}
		#languages {margin:5px 0;}
		
		#menu {width:100%;background:#7f0055;-moz-border-radius:4px;}
		#menu a {font:bold 17px georgia;color:white;padding:4px;display:block;border-left:1px solid white;text-align:center;text-decoration:none;}
		#menu a:hover {background:#b9669e;} 
		
		.hidden-code {display:none;}
		.copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
	</style>
</head>
<body>
<div id="container">
<div id="logo">
	<h1><a href="http://codepress.org/">CodePress</a></h1>
	<h2><a href="http://codepress.org/">Online Real Time Syntax Highlighting Editor</a></h2>
</div>
<p>CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser.</p>
<p>Original CodePress is developed by Fernando M.A.d.S and Michael Hurni.  This CodePress is modified by Takuya Otani@SimpleBoxes.</p>
<p>I've checked this script on the following browser:</p>
<ul>
<li>Firefox (Gecko)</li>
<li>Internet Explorer 6.0 or later</li>
<li>Opera 9.23</li>
<li>Safari 2.0 or later</li>
</ul>
<h3>Sample</h3>
<div><textarea id="cp1" class="codepress html" style="width:700px;height:300px;" wrap="off">
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;CodePress - Online Real Time Syntax Highlighting Editor&lt;/title&gt;
	&lt;style type=&quot;text/css&quot;&gt;
	@import url(styles.css);	
	&lt;/style&gt;
	&lt;script type=&quot;text/javascript&quot;&gt;
	function getCode() &#123;
		alert(textWithoutHighlighting);
	&#125;
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;logo&quot;&gt;
	&lt;h1&gt;&lt;a href=&quot;http://codepress.org/&quot;&gt;CodePress&lt;/a&gt;&lt;/h1&gt;
	&lt;h2&gt;Online Real Time Syntax Highlighting Editor&lt;/h2&gt;
	&lt;img src=&quot;testimage.gif&quot; /&gt;
&lt;/div&gt;
&lt;div id=&quot;languages&quot;&gt;
	&lt;em&gt;choose language:&lt;/em&gt; 
	&lt;button onclick=&quot;edit('codepress.php',this)&quot; id=&quot;default&quot;&gt;PHP&lt;/button&gt; 
	&lt;button onclick=&quot;edit('FileManager.java',this)&quot;&gt;Java&lt;/button&gt; 
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></div>
<p>
	<input type="button" class="actions" onclick="alert(cp1.getCode())" value="get code from editor" />
	<input type="button" class="actions" onclick="cp1.toggleEditor()" value="turn on/off CodePress" />
	<input type="button" class="actions" onclick="cp1.toggleLineNumbers()" value="show/hide line numbers" />
	<input type="button" class="actions" onclick="cp1.toggleAutoComplete()" value="turn on/off auto-complete" />
	<input type="button" class="actions" onclick="cp1.toggleReadOnly()" value="turn on/off read only" />
</p>
</div><!-- end_of_container -->
</body>
</html>
